<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BoLe智能HR系统 - 全屏界面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            height: 100vh;
            overflow: hidden;
        }

        .main-container {
            display: flex;
            height: 100vh;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }

        /* 左侧候选人列表 */
        .candidate-list {
            width: 300px;
            background: #f8f9fa;
            border-right: 2px solid #e9ecef;
            overflow-y: auto;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        }

        .list-header {
            background: #343a40;
            color: white;
            padding: 20px;
            text-align: center;
            font-weight: bold;
            font-size: 18px;
        }

        .candidate-dropdown {
            width: 100%;
            padding: 15px;
            border: none;
            background: white;
            border-bottom: 1px solid #dee2e6;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .candidate-dropdown:hover {
            background: #e9ecef;
        }

        .candidate-dropdown:focus {
            outline: none;
            background: #007bff;
            color: white;
        }

        /* 右侧主内容区域 */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .content-header {
            background: #007bff;
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .content-title {
            font-size: 24px;
            font-weight: bold;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .btn-primary {
            background: #28a745;
            color: white;
        }

        .btn-primary:hover {
            background: #218838;
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        .btn-secondary:hover {
            background: #5a6268;
            transform: translateY(-2px);
        }

        .btn-danger {
            background: #dc3545;
            color: white;
        }

        .btn-danger:hover {
            background: #c82333;
            transform: translateY(-2px);
        }

        /* 内容区域 */
        .content-body {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background: #ffffff;
        }

        .info-section {
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .info-section:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.15);
        }

        .section-header {
            background: linear-gradient(45deg, #007bff, #0056b3);
            color: white;
            padding: 15px 20px;
            border-radius: 10px 10px 0 0;
            font-weight: bold;
            font-size: 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .section-content {
            padding: 20px;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 15px;
        }

        .info-item {
            display: flex;
            flex-direction: column;
        }

        .info-label {
            font-weight: bold;
            color: #495057;
            margin-bottom: 5px;
            font-size: 14px;
        }

        .info-value {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #e9ecef;
            font-size: 16px;
            color: #212529;
        }

        .resume-content {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #e9ecef;
            line-height: 1.6;
            font-size: 14px;
            color: #495057;
            max-height: 300px;
            overflow-y: auto;
        }

        .notes-section {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 8px;
            padding: 20px;
        }

        .notes-content {
            min-height: 120px;
            padding: 15px;
            border: 1px solid #e9ecef;
            border-radius: 5px;
            font-size: 14px;
            line-height: 1.6;
            background: white;
            resize: vertical;
        }

        .save-notes-btn {
            margin-top: 15px;
            background: #ffc107;
            color: #212529;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .save-notes-btn:hover {
            background: #e0a800;
            transform: translateY(-2px);
        }

        /* 加载状态 */
        .loading {
            text-align: center;
            padding: 50px;
            color: #6c757d;
            font-size: 18px;
        }

        .loading::after {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #007bff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-left: 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .main-container {
                flex-direction: column;
            }
            
            .candidate-list {
                width: 100%;
                height: 200px;
            }
            
            .info-grid {
                grid-template-columns: 1fr;
            }
        }

        /* 滚动条美化 */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

        /* PDF查看按钮特殊样式 */
        .pdf-btn {
            background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 25px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
        }

        .pdf-btn:hover {
            background: linear-gradient(45deg, #ff5252, #ff7979);
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
        }
    </style>
</head>
<body>
    <div class="main-container">
        <!-- 左侧候选人列表 -->
        <div class="candidate-list">
            <div class="list-header">
                📋 候选人列表
            </div>
            <select class="candidate-dropdown" id="candidateSelect" onchange="loadCandidateData()">
                <option value="">选择候选人...</option>
            </select>
        </div>

        <!-- 右侧主内容区域 -->
        <div class="main-content">
            <!-- 内容头部 -->
            <div class="content-header">
                <div class="content-title">
                    🤖 BoLe智能HR系统 - 候选人详情
                </div>
                <div class="action-buttons">
                    <button class="btn pdf-btn" onclick="viewPDF()">
                        📄 查看PDF简历
                    </button>
                    <button class="btn btn-primary" onclick="analyzeCandidate()">
                        🔍 AI分析
                    </button>
                    <button class="btn btn-secondary" onclick="refreshData()">
                        🔄 刷新
                    </button>
                </div>
            </div>

            <!-- 内容主体 -->
            <div class="content-body" id="contentBody">
                <div class="loading">
                    正在加载候选人数据...
                </div>
            </div>
        </div>
    </div>

    <script>
        let currentCandidateId = null;
        let candidates = [];

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadCandidatesList();
        });

        // 加载候选人列表
        async function loadCandidatesList() {
            try {
                const response = await fetch('/api/candidates');
                const data = await response.json();
                
                if (data.success) {
                    candidates = data.candidates || [];
                    const select = document.getElementById('candidateSelect');
                    
                    // 清空现有选项
                    select.innerHTML = '<option value="">选择候选人...</option>';
                    
                    // 添加候选人选项
                    candidates.forEach(candidate => {
                        const option = document.createElement('option');
                        option.value = candidate.id;
                        option.textContent = `${candidate.name || '未知姓名'} (${candidate.id})`;
                        select.appendChild(option);
                    });
                    
                    console.log(`加载了 ${candidates.length} 个候选人`);
                } else {
                    console.error('加载候选人列表失败:', data.error);
                }
            } catch (error) {
                console.error('请求失败:', error);
            }
        }

        // 加载候选人详细数据
        async function loadCandidateData() {
            const select = document.getElementById('candidateSelect');
            const candidateId = select.value;
            
            if (!candidateId) {
                document.getElementById('contentBody').innerHTML = `
                    <div class="loading">
                        请从左侧列表选择一个候选人...
                    </div>
                `;
                return;
            }

            currentCandidateId = candidateId;
            document.getElementById('contentBody').innerHTML = `
                <div class="loading">
                    正在加载候选人 ${candidateId} 的详细信息...
                </div>
            `;

            try {
                const response = await fetch(`/api/candidates/${candidateId}`);
                const data = await response.json();

                if (data.success && data.candidate) {
                    renderCandidateDetails(data.candidate);
                } else {
                    document.getElementById('contentBody').innerHTML = `
                        <div class="info-section">
                            <div class="section-header">❌ 错误</div>
                            <div class="section-content">
                                <p>无法加载候选人信息: ${data.error || '未知错误'}</p>
                            </div>
                        </div>
                    `;
                }
            } catch (error) {
                console.error('加载候选人数据失败:', error);
                document.getElementById('contentBody').innerHTML = `
                    <div class="info-section">
                        <div class="section-header">❌ 网络错误</div>
                        <div class="section-content">
                            <p>请求失败，请检查网络连接</p>
                        </div>
                    </div>
                `;
            }
        }

        // 渲染候选人详细信息
        function renderCandidateDetails(candidate) {
            const contentHtml = `
                <!-- 基本信息 -->
                <div class="info-section">
                    <div class="section-header">
                        👤 基本信息
                        <span style="font-size: 14px; opacity: 0.9;">ID: ${candidate.id}</span>
                    </div>
                    <div class="section-content">
                        <div class="info-grid">
                            <div class="info-item">
                                <div class="info-label">姓名</div>
                                <div class="info-value">${candidate.name || '未知'}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">工作经验</div>
                                <div class="info-value">${candidate.experience || 0} 年</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">技能</div>
                                <div class="info-value">${Array.isArray(candidate.skills) ? candidate.skills.join(', ') : candidate.skills || '无'}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">地点</div>
                                <div class="info-value">${candidate.location || '未知'}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">相关性</div>
                                <div class="info-value">${candidate.相关性 || '未评估'}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">分类</div>
                                <div class="info-value">${candidate.category || 'HR'}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 简历内容 -->
                <div class="info-section">
                    <div class="section-header">
                        📄 简历内容
                        <button class="btn btn-secondary" onclick="viewPDF()" style="padding: 5px 10px; font-size: 12px;">
                            📱 查看PDF
                        </button>
                    </div>
                    <div class="section-content">
                        <div class="resume-content">
                            ${candidate.content || candidate.html_content || '暂无简历内容'}
                        </div>
                    </div>
                </div>

                <!-- HR笔记 -->
                <div class="info-section">
                    <div class="section-header">
                        📝 HR笔记
                        <button class="save-notes-btn" onclick="saveNotes()" style="padding: 5px 15px; font-size: 12px;">
                            💾 保存笔记
                        </button>
                    </div>
                    <div class="section-content">
                        <div class="notes-section">
                            <textarea 
                                class="notes-content" 
                                id="candidateNotes" 
                                placeholder="在此添加HR笔记、面试记录、评估意见等...&#10;&#10;例如：&#10;- 技能匹配度：85%&#10;- 面试表现：良好&#10;- 薪资期望：15-20K&#10;- 下一步：安排二面"
                            >${candidate.notes || ''}</textarea>
                        </div>
                    </div>
                </div>
            `;

            document.getElementById('contentBody').innerHTML = contentHtml;
        }

        // 查看PDF简历
        async function viewPDF() {
            if (!currentCandidateId) {
                alert('请先选择一个候选人');
                return;
            }

            try {
                // 检查PDF是否存在
                const response = await fetch(`/api/candidates/${currentCandidateId}/pdf`);
                
                if (response.ok) {
                    // 在新窗口中打开PDF
                    window.open(`/api/candidates/${currentCandidateId}/pdf`, '_blank');
                } else {
                    alert('该候选人暂无PDF简历文件');
                }
            } catch (error) {
                console.error('PDF查看失败:', error);
                alert('PDF查看功能暂时不可用');
            }
        }

        // AI分析候选人
        async function analyzeCandidate() {
            if (!currentCandidateId) {
                alert('请先选择一个候选人');
                return;
            }

            try {
                const response = await fetch('/api/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        message: `分析候选人 ${currentCandidateId} 的匹配度和技能水平，给出详细评估`
                    })
                });

                const result = await response.json();
                
                if (result.success) {
                    alert(`AI分析结果：\\n\\n${result.message}`);
                } else {
                    alert(`AI分析失败：${result.error}`);
                }
            } catch (error) {
                console.error('AI分析失败:', error);
                alert('AI分析功能暂时不可用');
            }
        }

        // 保存笔记
        async function saveNotes() {
            if (!currentCandidateId) {
                alert('请先选择一个候选人');
                return;
            }

            const notes = document.getElementById('candidateNotes').value;

            try {
                const response = await fetch(`/api/candidates/${currentCandidateId}/notes`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        notes: notes
                    })
                });

                const result = await response.json();
                
                if (result.success) {
                    alert('笔记保存成功！');
                } else {
                    alert(`笔记保存失败：${result.error}`);
                }
            } catch (error) {
                console.error('保存笔记失败:', error);
                alert('笔记保存功能暂时不可用');
            }
        }

        // 刷新数据
        function refreshData() {
            if (currentCandidateId) {
                loadCandidateData();
            } else {
                loadCandidatesList();
            }
        }
    </script>
</body>
</html>







